<template>
	<view>
		<u-popup :show="showLogin" mode="bottom" border-radius="28" @close="showLogin = false" :mask-close-able="true"
			:custom-style="{
			background:'transparent'
		}">
			<view class="login-container" :style="{backgroundImage: `url(${baseImgUrl}newTable/loginBg.png)`}">
				<view class="login-top">
          <image :src="`${baseImgUrl}/logo.jpg`" mode="scaleToFill"></image>
<!--					<u-avatar :src="baseImgUrl +'/logo.jpg'"></u-avatar>-->
					<view class="name">
						FOMOXYZ
					</view>
				</view>
        <view class="agreement">
<!--          <u-radio-group v-model="radiovalue" placement="row">-->
<!--            <u-radio  name="1" activeColor="#CC34B3" size="30" customStyle="transform:scale(0.7)" @change="radioChange">-->
<!--            </u-radio>-->
<!--          </u-radio-group>-->
          <view class="circle" @click.stop="agreement = true" :style="{
            background: agreement ? 'transparent' : '#fff'
          }">
            <image v-if="agreement" @click.stop="agreement = false" src="/static/newTable/loginIcon1.png" mode="widthFix"/>
          </view>
          <text>我已阅读并同意</text> <text style="color: #777;" @click="handlePrivate">《用户隐私政策》</text>
        </view>
        <view class="btns">
          <view class="btnOut">
            <view class="btn"  @click="showLogin = false">
              <text>暂不登陆</text>
            </view>
          </view>
          <view class="btnOut btnOut2" >
            <view class="btn"  @click="userLogin">
              <text>授权登陆</text>
            </view>
          </view>
        </view>
			</view>

    </u-popup>
<!--		<u-popup confirm-color="#12703C" mode="center" :show-cancel-button="true" :show="showSetting" :custom-style="{-->
<!--			background:'transparent'-->
<!--		}">-->
<!--			<view class="getAvatarBox">-->
<!--				<view class="title2">-->
<!--					<text>获取头像昵称</text>-->
<!--				</view>-->
<!--				<button size="default" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">-->
<!--					<image mode="aspectFit" class="avatar" :src="avatarUrl"></image>-->
<!--				</button>-->
<!--				<view class="u-flex input-box">-->
<!--					<input type="nickname" v-model="username" class="weui-input" @change="getNickName"-->
<!--						placeholder="请输入昵称" />-->
<!--				</view>-->
<!--				<view class="btns2">-->
<!--					<view class="btn" @click="confirmUserInfo">-->
<!--						确定-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</u-popup>-->

		<bindPhone ref="bindPhone" @handleSuc="getUserInfo()" :is-close="false" :show-cancel="false" :show-defalut="true"/>

		<u-popup z-index="999999999" mode="center" :show-cancel-button="true" :show="showPrivacy" :custom-style="{
			background:'transparent'
		}">
			<view class="slot-content">
				<scroll-view :scroll-y="true" style="height: 80vh;">
					<view class="textCont">
						<text class="tit">用户隐私政策</text>
						<text>
							感谢您选择我们的服务！我们非常重视您的隐私安全，并致力于保护您的个人信息。本隐私政策旨在说明我们在收集、使用、存储和分享您的个人信息时的做法。请仔细阅读以下条款，以便了解我们如何处理您的数据以及您享有的权利。
						</text>
						<text>
							1. 信息收集
						</text>
						<text>
							昵称与头像：为了提供更个性化的服务体验，我们将收集并使用您提供的昵称和头像。这些信息仅用于在我们的平台上展示，不会用于其他目的。
						</text>
						<text>
							手机号码：当您注册或使用我们的服务时，我们可能要求您提供手机号码。手机号将用于创建账户、接收订单确认和更新信息，以及必要时向您发送通知和服务消息。
						</text>
						<text>
							2. 信息使用
						</text>
						<text>
							我们将严格遵守法律法规，合理合法地使用您的个人信息。
						</text>
						<text>
							您的信息主要用于提供和改进我们的服务，包括但不限于处理订单、提供客户服务、发送重要通知等。
						</text>
						<text>
							在未获得您的明确同意之前，我们不会将您的个人信息用于营销或其他非服务相关的用途。
						</text>
						<text>
							3. 信息共享
						</text>
						<text>
							我们承诺不会出售、出租或泄露您的个人信息给第三方，除非是在提供服务所必需的情况下，例如与物流合作伙伴共享必要的配送信息。
						</text>
						<text>
							法律要求或为了保护我们及他人的合法权益，在必要时，我们也可能会披露相关信息。
						</text>
						<text>
							4. 数据安全
						</text>
						<text>
							我们采用合理的物理、技术和管理措施来保护您的个人信息免遭丢失、误用、未经授权访问、泄露、更改或破坏。
						</text>
						<text>
							尽管我们采取了上述措施，但请您理解，没有任何安全系统是绝对安全的。因此，我们不能保证您的信息完全不受任何未经授权的访问。
						</text>
						<text>
							5. 用户权利
						</text>
						<text>
							您有权访问、更正、删除您的个人信息，也可以撤销对我们使用您个人信息的授权。
						</text>
						<text>
							如需行使上述权利，请通过[客服联系方式]联系我们。
						</text>
						<text>
							6. 隐私政策的变更
						</text>
						<text>
							我们保留随时修改本隐私政策的权利。一旦发生变更，我们将在网站上发布更新后的版本，并标注最新的生效日期。
						</text>
						<text>
							如果我们对本政策做出重大修改，我们还将通过电子邮件或站内信等方式通知您。
						</text>
						<text>
							如果您对本隐私政策有任何疑问，或者希望了解更多关于如何保护您的个人信息的信息，请通过[客服联系方式]与我们联系。
						</text>
						<view class="dtBtn" @click="read">
							已阅读
						</view>
					</view>

				</scroll-view>
			</view>
		</u-popup>
		<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
    <diaBox ref="diaBoxRef" title="获取用户头像" :show-btns="false" :isClose="false">
      <template v-slot:dia-cont>
        <view class="diaCont">
          <view class="uploadBox">
            <view class="img">
              <button size="default" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image v-if="!avatarUrl" :src="`${baseImgUrl}manager/img1.png`" mode="widthFix"/>
                <image v-else :src="avatarUrl" mode="scaleToFill"/>
              </button>
            </view>

          </view>
          <view class="inputBox">

            <u--input
                placeholder="请输入用户昵称"
                border="surround"
                v-model="username"
                color="#fff"
                :placeholderStyle="{
                  color:'#707a84'
                }"
            ></u--input>
          </view>

          <view class="btns">
            <view class="btnOut btnOut2">
              <view class="btn" @click="confirmUserInfo">
                提交
              </view>
            </view>
          </view>
        </view>
      </template>
    </diaBox>
	
	</view>
</template>

<script>
	import {
		userLogin,
		updateUserInfo,
		uploadFileApi,
		findCustomerInfoApi,
		getCodeApi,
		bindPhoneApi
	} from '../../api/api';

	import bindPhone from "@/components/bindPhone/index"

	import {
		mapState,
		mapMutations
	} from 'vuex'
  import diaBox from "@/components/diaBox/index.vue";

	export default {
		name: "userLogin",
		computed: {
			...mapState('userStore', ['user']),
		},
		emits:['@doFunc'],
		components: {
      diaBox,
			bindPhone
		},
		data() {
			return {
        radiovalue:'',
				showLogin: false,
				// 授权码
				wxcode: "",
				// 用户信息
				userInfo: {},
				// 同意协议
				agreement: false,
				// 用户头像设置
				showSetting: false,
				// 用户头像
				avatarUrl: '',
				// 用户昵称
				username: '',
				// 当前页面
				currentPage: '',
				// 头像名称
				newFileName: '',
				// 显示验证码
				showCode: false,
				// 手机号
				phone: '',
				// 验证码
				inputCode: '',
				seconds: 90,
				tips: '获取验证码',
				showPrivacy: false,
				baseImgUrl: this.$baseImgUrl,
			}
		},
		watch: {
			showLogin(old, newVal) {
				this.getCurrentRoute()
			},
			user(newVal) {
				console.log(newVal, "newVal");
			}
		},
		methods: {
			...mapMutations('userStore', ['setUserInfo']),
			radioChange(e){
				console.log(e);
				this.agreement = true
			},
			showBinding() {
				this.$refs.bindPhone.show()
			},
			read() {
				this.showPrivacy = false
				this.showLogin = true
				this.agreement = true
        this.radiovalue = '1'
			},
			handlePrivate() {
				this.showPrivacy = true
				this.showLogin = false
			},
			// 绑定手机号
			async handleBindPhone() {
				if (this.phone == "") return this.$toast("请输入手机号")
				if (this.inputCode == "") return this.$toast("请输入验证码")

				const data = {
					"mobile": this.phone,
					"verifyCode": this.inputCode
				}

				const res = await bindPhoneApi(data)
				if (res.code == 200) {
					await this.getUserInfo()
					this.reEnter()
					// this.showCode = false
					this.$refs.bindPhone.close()
				}
			},
			// code改变
			codeChange(text) {
				this.tips = text;
			},
			// 获取验证码
			async getCode() {
				if (this.phone == '') return uni.$u.toast('请输入手机号');
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await getCodeApi(this.phone)
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 获取用户昵称
			getNickName(e) {
				this.username = e.detail.value
			},
			// 取消选择头像
			handleCancel() {
				this.showSetting = false
				this.reEnter()
			},
			// 确认保存 用户头像与昵称
			async confirmUserInfo() {

				// if (this.avatarUrl == '') return this.$toast("请选择头像")
				if (this.username == '') return this.$toast("请输入昵称")

				const data = {
					nickName: this.username,
					avatar: this.newFileName,
				}
				uni.showLoading({
					title: "保存中"
				})

				const res = await updateUserInfo(data)
				if (res.code == 200) {
					this.showSetting = false
					this.$refs.bindPhone.show()
          this.$refs.diaBoxRef.show = false
					console.log(this.$refs.bindPhone, "this.$refs.bindPhone");
				}
				uni.hideLoading()
			},

			// 获取用户信息
			async getUserInfo() {
				const res = await findCustomerInfoApi()
				uni.setStorageSync("userInfo", res.data)
				this.setUserInfo(res.data)
			},
			/**
			 * 设置用户头像
			 * @param {Object} e
			 */
			async onChooseAvatar(e) {
				const data = {
					file: e.detail.avatarUrl
				}

				const token = uni.getStorageSync("token");

				let a = uni.uploadFile({
					url: this.$baseUrl + "/common/upload",
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						Authorization: "Bearer " + token
					},
					success: (res) => {
						const res1 = JSON.parse(res.data)
						console.log(res1, "res1res1");
						this.avatarUrl = res1.url
						this.newFileName = res1.fileName
					}
				})
			},
			async userLogin() {
				console.log(this.agreement, "this.agreement");
				if (!this.agreement) return this.$toast("请先阅读用户隐私政策")

				uni.showLoading({
					mask: true,
					title: '登陆中'
				})
				uni.login({
					provider: "weixin",
					success: async loginRes => {
						this.wxcode = loginRes.code

						const data = {
							code: loginRes.code
						}
						const res = await userLogin(data)
						const resData = res.data
						console.log(resData,"resData");
						uni.hideLoading()
						uni.setStorageSync("token", resData.token)
						uni.setStorageSync("userInfo", resData.customerInfo)
						this.showLogin = false

						// 判断设置头像和昵称没
						if (!resData.customerInfo) {
						  this.$refs.diaBoxRef.show = true
						} else {
							this.reEnter()
						}
						// this.showCode = true
					},
					fail: (err) => {
						this.$toast(JSON.stringify(err));
					},
				});
			},
			// 刷新页面
			async reEnter() {
				let type = 'redirectTo'
				let pageList = ['pages/home/index', 'pages/pickUp/index', 'pages/order/index', 'pages/mine/index']
				pageList.forEach((item) => {
					if (this.currentPage.includes(item)) {
						return type = 'reLaunch'
					}
				})
				this.getUserInfo()

				const data = {
					url: this.currentPage,
					type: type,
				}
				this.$emit("doFunc")
				this.$u.route(data)
			},
			/**
			 * 获取当前路径
			 */
			getCurrentRoute() {
				let curPage = getCurrentPages();
				let route = curPage[curPage.length - 1].route; //获取当前页面的路由
				let params = curPage[curPage.length - 1].options; // 获取当前页面参数，如果有则返回参数的对象，没有参数返回空对象{}
				let query = '';
				let keys = Object.keys(params); //获取对象的key 返回对象key的数组
				if (keys.length > 0) {
					query = keys.reduce((pre, cur) => {
						return pre + cur + '=' + params[cur] + '&';
					}, '?').slice(0, -1);
				}
				this.currentPage = route + query
				console.log(this.currentPage, "this.currentPage");
			}

		},
	}
</script>

<style lang="scss" scoped>
::v-deep .avatar-wrapper {
  background: transparent;
}
.diaCont {
  .uploadBox {
    margin-top: 52rpx;

    .tit {
      text-align: center;
      font-weight: 600;
      font-size: 28rpx;
      color: #FFFFFF;
      line-height: 32rpx;
      text-align: center;
      font-style: normal;
      margin-bottom: 38rpx;
    }

    .img {
      text-align: center;

      image {
        width: 196rpx;
        height: 196rpx;
        border-radius: 50%;
      }
    }
  }

  .inputBox {
    width: 552rpx;
    height: 112rpx;
    background: rgba(15, 15, 15, 0.41);
    border-radius: 40rpx;
    border: 2rpx solid #35383b;
    backdrop-filter: blur(7px);
    padiding: 0 32rpx;
    line-height: 112rpx;
    display: flex;
    align-items: center;
    margin-top: 30rpx;
  }

  .btns {
    .btn {
      width: 100% !important;
    }
  }
}
	::v-deep .u-radio{
		align-items: center !important;
	}
	::v-deep .u-modal {
		position: relative;
		z-index: 999999;
		background-color: transparent;
	}

	.textCont {
		display: flex;
		flex-direction: column;
		background: rgba(38, 42, 74, 0.8);
		padding: 32rpx;
		width: 90vw;
		border: 2rpx solid #5D617E;
		border-radius: 40rpx;

		.dtBtn {
			background: linear-gradient(267deg, #CC34B3 0%, #541A66 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 34rpx;
			color: #fff;
			margin-top: 20rpx;
		}

		.tit {
			text-align: center;
			font-size: 38rpx;
			color: #fff;
			margin-bottom: 20rpx;
		}

		text {
			margin-bottom: 20rpx;
			color: #fff;
			margin-bottom: 10rpx;
		}
	}

	::v-deep .u-button--success {
		height: 90rpx;
		background: linear-gradient(267deg, #CC34B3 0%, #541A66 100%);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
	}

	.weui-input2 {
		border: none !important;

	}

	.phoneBox {


		.inputBox {
			display: flex;
			align-items: center;
			border: 1rpx solid #ccc;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.btn {
				color: #CC34B3;
				font-size: 26rpx;
				margin-right: 25rpx;
			}

			.input {
				flex: 1;
			}
		}
	}

	.btns2 {
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			display: flex;
			justify-content: center;
			width: 100%;
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			background: linear-gradient(267deg, #CC34B3 0%, #541A66 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			margin-top: 44rpx;

			text {}

			&:last-child {
				margin-right: 0;
			}
		}
	}


  .btns{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;
    .btnOut{
      flex: 1;
      border-radius: 64rpx;
      box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
      margin-right: 50rpx;
      height: 90rpx;
      &:last-child{
        margin-right: 0;
      }
    }
    .btnOut2{
      box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
      .btn{
        background: #2cb3af;
      }
    }
    .btn{
      width: 100%;
      font-weight: 600;
      font-size: 36rpx;
      color: #FFFFFF;
      line-height: 90rpx;
      text-align: center;
      border-radius: 64rpx;
      box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
    }
  }

	.agreement {
		margin-top: 20rpx;
		display: flex;
    justify-content: center;
    .circle{
      width: 40rpx;
      height: 40rpx;
      background: #fff;
      border-radius: 50%;
      margin-right: 20rpx;
      image{
        width: 40rpx;
        height: 40rpx;
      }
    }
		text {
			color: #fff;
			display: flex;
			align-items: center;
		}
	}

	.u-flex {
		display: flex;
	}

	.login-container {
		width: 100%;
    height: 588rpx;
		padding: 20rpx 30rpx 100rpx;
		border-radius: 12rpx 12rpx 0 0;
    background-size: 100% 100%;
		.login-top {
			margin-bottom: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      image{
        width: 160rpx;
        height: 160rpx;
        border-radius: 71rpx;
        margin-bottom: 32rpx;
      }
		}

		.name {
      font-weight: 500;
      font-size: 40rpx;
      color: #FFFFFF;
      text-align: center;
		}

		button {
			margin-bottom: 10rpx;
			height: 90rpx;
			background: linear-gradient(267deg, #CC34B3 0%, #541A66 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
		}

		/deep/.u-icon__icon {
			top: -7rpx !important;
		}

		/deep/.u-iconfont {
			top: -7rpx !important;
		}

		.noBtn {
			margin-left: 30rpx;
		}
	}
</style>
